<template>
  <div class="c-bg-sgray">
    <div v-if="honorImgSrc" :class="[direction == 'VER'?'c-ph40 c-pt80':'c-ph100 c-pt200']" class="c-w100 c-maxw640">
      <img @click.stop="tapShowImg" class="c-w100" :src="honorImgSrc" alt="">
      <div class="c-fs24 c-textAlign-c c-mt16 c-fc-white">长按保存图片，分享给好友</div>
    </div>
    <section class="c-flex-row c-ph24 c-aligni-center c-bd-t1 c-hh88 c-pf c-p-b0 c-w100 c-maxw640 c-bg-white c-pz1 mb7_green">
      <div @click="backHome" class="c-w100 c-flex-row c-flex-center c-hh64 c-br36 c-fs28 theme-bg c-fc-white"> 返回首页 </div>
    </section>
    <honor-certificate ref="honorcerCom" @drawImageSuccess="drawImageSuccess" />
  </div>
</template>

<script>
import { utilJs } from "@/utils/common.js";
import honorCertificate from "@/components/templates/learnAndachCer/honorCertificate.vue";
export default {
  name: "List",
  components: {
    honorCertificate,
  },
  props: [],
  data() {
    return {
      honorImgSrc:'',
      direction:'VER',
    };
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() {
    this.cardId = this.$route.query.cardId || ''
    this.receiveCard()
  },
  methods: {
    drawImageSuccess(info) {
      this.honorImgSrc = info.src;
      this.direction = info.dir;
    },
    backHome() {
      this.$routerGo(this, "push", { path: '/' });
    },
    tapShowImg() {
      this.$refs.honorcerCom.public_showImg(this.honorImgSrc, this.direction);
    },
    receiveCard() {
      let that = this;
      utilJs.postMethod(global.apiurl + 'Certificate/receiveCard', {
        type:3,
        cardId:that.cardId
      }, function (res) {
        if (res.code == 500) {
          that.$showCjToast({
            text: '该证书不存在',
            type: 'warn',
          })
          let path = "/member/myAchievement/AchievementList?bigType=3"
          that.$routerGo(that, "replace", {
            path: path,
          });
          return
        }
        that.$showCjToast({
          text: '领取成功',
          type: 'success',
        })
        let prodId = res.logId
        that.$refs.honorcerCom.public_open({
          id:prodId,
          cardId:that.cardId,
          isReceivedStudy:1
        })
      });
    },
    // 分享
    wechatShare: function () {
      let path = "/member/myAchievement/AchievementList"
      let shareUrl =
        window.location.href.split("#")[0] +
        "#" +
        path +
        "?refereeId=" +
        localStorage.getItem("userId");
        let otherOption = {
          hideAllNonBaseMenuItem:1
        }
      utilJs.wechatConfig(shareUrl, "我的成就", "", "", function () { }, '', otherOption);
    },
    //手机端分享
    // appShare: function () {
    //   let path = "/member/myAchievement/AchievementList"
    //   let shareUrl =
    //     window.location.href.split("#")[0] +
    //     "#" +
    //     path +
    //     "?refereeId=" +
    //     localStorage.getItem("userId");
    //   utilJs.appShareTrue("我的成就", "", shareUrl, "");
    // },
    initData() {
      this.companyAuth = JSON.parse(localStorage.getItem("companyAuth"));
    }
  },
  activated() {
    setDocumentTitle("我的成就");// eslint-disable-line
    this.wechatShare();
  },
  deactivated() {
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
.bg-orange-linear-gradient {
  background: linear-gradient(#ff8920, #ffc26b); /* 标准的语法 */
  box-shadow: 0px 2px 8px 0px rgba(255, 141, 37, 0.5);
  border-radius: 50%;
}
.old-into{
  border-radius: 5rem 0 0 5rem
}
.filterBlur{
  filter: blur(1.5px)
}
.col{
    float: left;
}
</style>
